<template>
  <div class="admin-layout">
    <el-container>
      <el-aside width="250px">
        <div class="admin-sidebar">
          <div class="logo">
            <img src="@/assets/images/logo.png" alt="Logo">
            <span>管理后台</span>
          </div>
          <el-menu
            :default-active="activeMenu"
            class="admin-menu"
            router
          >
            <el-menu-item index="/admin">
              <el-icon><data-line /></el-icon>
              <span>数据看板</span>
            </el-menu-item>
            <el-menu-item index="/admin/videos">
              <el-icon><video-camera /></el-icon>
              <span>视频管理</span>
            </el-menu-item>
            <el-menu-item index="/admin/categories">
              <el-icon><folder /></el-icon>
              <span>分类管理</span>
            </el-menu-item>
            <el-menu-item index="/admin/users">
              <el-icon><user /></el-icon>
              <span>用户管理</span>
            </el-menu-item>
          </el-menu>
        </div>
      </el-aside>
      
      <el-container>
        <el-header>
          <div class="admin-header">
            <div class="breadcrumb">
              <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/admin' }">管理后台</el-breadcrumb-item>
                <el-breadcrumb-item>{{ currentPage }}</el-breadcrumb-item>
              </el-breadcrumb>
            </div>
            <div class="user-info">
              <el-dropdown @command="handleCommand">
                <span class="user-dropdown">
                  {{ username }}
                  <el-icon><arrow-down /></el-icon>
                </span>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item command="profile">个人信息</el-dropdown-item>
                    <el-dropdown-item command="logout">退出登录</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </div>
        </el-header>
        
        <el-main>
          <router-view v-slot="{ Component }">
            <transition name="fade" mode="out-in">
              <component :is="Component" />
            </transition>
          </router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import {
  DataLine,
  VideoCamera,
  Folder,
  User,
  ArrowDown
} from '@element-plus/icons-vue'

const route = useRoute()
const router = useRouter()
const username = ref(localStorage.getItem('username') || '管理员')

const activeMenu = computed(() => route.path)
const currentPage = computed(() => {
  const pathMap = {
    '/admin': '数据看板',
    '/admin/videos': '视频管理',
    '/admin/categories': '分类管理',
    '/admin/users': '用户管理'
  }
  return pathMap[route.path] || '未知页面'
})

const handleCommand = (command) => {
  switch (command) {
    case 'profile':
      router.push('/admin/profile')
      break
    case 'logout':
      localStorage.removeItem('token')
      localStorage.removeItem('username')
      localStorage.removeItem('isAdmin')
      router.push('/login')
      break
  }
}
</script>

<style lang="scss" scoped>
.admin-layout {
  min-height: 100vh;
  background: #f5f7fa;

  .el-container {
    height: 100vh;
  }

  .el-aside {
    background: #304156;
    color: white;

    .admin-sidebar {
      height: 100%;
      display: flex;
      flex-direction: column;

      .logo {
        height: 60px;
        display: flex;
        align-items: center;
        padding: 0 20px;
        background: #2b2f3a;

        img {
          height: 32px;
          margin-right: 12px;
        }

        span {
          font-size: 18px;
          font-weight: 600;
        }
      }

      .admin-menu {
        border-right: none;
        background: transparent;

        :deep(.el-menu-item) {
          color: #bfcbd9;

          &:hover, &.is-active {
            color: #409EFF;
            background: #263445;
          }

          .el-icon {
            margin-right: 8px;
          }
        }
      }
    }
  }

  .el-header {
    background: white;
    border-bottom: 1px solid #e6e6e6;
    padding: 0 20px;

    .admin-header {
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .user-dropdown {
        display: flex;
        align-items: center;
        cursor: pointer;
        color: #606266;

        .el-icon {
          margin-left: 4px;
        }
      }
    }
  }

  .el-main {
    padding: 20px;
    background: #f5f7fa;
  }
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

@media (max-width: 768px) {
  .admin-layout {
    .el-aside {
      width: 64px !important;

      .admin-sidebar {
        .logo {
          span {
            display: none;
          }
        }
      }
    }
  }
}
</style> 